<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				
				{{ text.ID !=undefined ? '修改签到' : '新增签到' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main">
				<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" @submit="handleSubmit">
					<a-form-item label="签到类型">
						<a-select :allowClear="true" v-decorator="['Type', { rules: [{ required: true, message: '签到类型不能为空' }] }]">
							<a-select-option v-for="(item, index) in SignTypeList" :key="index" :value="item.Key">{{ item.Value }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="签到时间"><a-range-picker :show-time="{ format: 'HH:mm:ss' }" v-decorator="['Time', { rules: [{ required: true, message: '签到时间不能为空' }] }]" /></a-form-item>
					<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }"><a-button type="primary" html-type="submit">提交</a-button></a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { AddActivitySign, UpdateActivitySign } from '@/api/follow';
const data = [];
export default {
	props: {
		text: Object
	},
	watch: {
		text: function(text) {
			if (text.ID) {
				this.form.setFieldsValue({
					Type: text.Type,
					Time:[text.StartTime,text.EndTime]
					// StartTime: res.data.data.StartTime,
					// EndTime: res.data.data.EndTime,
					// Ico:res.data.data.Ico,
					// TypeID: res.data.data.TypeID,
					// ApplyIsNeedExam:res.data.data.ApplyIsNeedExam
				});
			} 
		}
	},
	data() {
		return {
			data,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			SignTypeList: this.global.SignTypeList
		};
	},
	methods: {
		moment,
		closeFunction(data) {
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		handleSubmit(e) {
			e.preventDefault();
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data={}
					data.ActivityID = this.text.ActivityID
					data.Type = values.Type
					data.StartTime = this.text.StartTime || values.Time[0].format('YYYY-MM-DD HH:mm:ss')
					data.EndTime = this.text.StartTime ||values.Time[1].format('YYYY-MM-DD HH:mm:ss')
					let res={}
					if(this.text.ID){
						data.id = this.text.ID
						res = await UpdateActivitySign(data);
					}else{
						res = await AddActivitySign(data);
					}
					this.$message.success(res.data.msg)
					if(res.data.code==0){
						this.closeFunction(1)
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
}

.base {
	position: absolute;
	width: 600px;
	height: 540px;
	background: #fff;
	left: 50%;
	margin-left: -300px;
	top: 50%;
	margin-top: -270px;
	overflow-y: auto;
}
.main {
	height: 90%;
	overflow-y: scroll;
}
/deep/.ant-form-item {
	margin: 20px 50px;
}
/deep/.ant-form-item-label {
	width: 100px !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker,
/deep/.ant-time-picker {
	width: 100%!important;
}
.fixed-top {
	width: inherit;
	position: absolute;
	line-height: 30px;
	top: 0px;
	background-color: white;
	z-index: 999;
	padding: 10px 0 0 10px;
}
.fixed-bottom {
	width: 164px;
	left: 50%;
	bottom: 0px;
	margin: 0px 0px 0px -82px !important;
	position: absolute;
	background-color: white;
	z-index: 999;
}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
